import { observer } from 'mobx-react'
import styles from './index.module.less'
import handNum from '@/resource/myChartResult/handWithNum.png'
import store from '../../store'
import { Dialog, Toast } from 'antd-mobile'
import { history } from 'umi'
import { getData, putData } from '@/servers/http'
import { api } from '@/servers/api'
import { useEffect } from 'react'
import { isNullData } from '@/utils'
import { getLocalStorage } from '@/storage'

const Chart = () => {
    const { id } = history.location.query || {}
    const { chartList, fillInList, isFinished, backToFirst } = store || {}
    /** 展示弹窗 */
    const showSelectModal = () => {
        if (isFinished) {
            Dialog.confirm({
                content: '同步我的实训结果生成档案',
                cancelText: '取消',
                confirmText: '同步档案',
                onConfirm: () => {
                    putData(`${api.userBarriersBatchUpdate}${id}`, { fill_type: 3 }).then(({ status }) => {
                        if (status === 200) {
                            history.replace({
                                pathname: '/archivedetail',
                                query: { id },
                            })
                        }
                    })
                },
            })
        } else {
            Dialog.confirm({
                content: '已生成我的求职档案',
                cancelText: '好的',
                confirmText: '前往档案',
                onConfirm: () => {
                    history.replace({
                        pathname: '/archivedetail',
                        query: { id },
                    })
                },
            })
        }
    }
    /** 校验是否需要展示弹窗 */
    const checkShow = () => {
        const identityType = getLocalStorage('IDENTITY_TYPE')
        if (Number(identityType) === 2) {
            showSelectModal()
        } else {
            getData(api.userBarriersScoreInfo).then(res => {
                if (Number(res.data?.is_score) === 1) {
                    Toast.show(Number(res.data?.is_course_score) === 1 ? '讲师已评分' : '讲师已评审')
                    return
                } else {
                    showSelectModal()
                }
            })
        }
    }

    useEffect(() => {
        if (!isNullData(fillInList)) {
            checkShow()
        }
    }, [])

    /** 重新编辑 */
    const ReEdit = () => {
        backToFirst()
    }

    return (
        <div className={styles.page}>
            <div className={styles.top_view}>
                <div className={styles.my_chart}>我的五指图</div>
                <img className={styles.hand_img} src={handNum} />
                <div className={styles.aperture} />
            </div>
            <div className={styles.feature}>
                {chartList?.map((item, index) => {
                    const { id: iid, name, feature } = item || {}
                    return (
                        <div key={iid} className={styles.data_box}>
                            <p className={styles.serial_number}>{index + 1}</p>
                            <div>
                                <p>{name}</p>
                                <p className={styles.reason}>{feature}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
            <div className={styles.footer} onClick={ReEdit}>
                <span>重新编辑</span>
            </div>
        </div>
    )
}

export default observer(Chart)
